<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
               [opened]="!(isHandset$ | async)" fixedInViewport="true">
    <div fxLayout="column" fxLayoutAlign="center center" id="sidenavBackground">
      <img alt="" class="src" id="profilePic" src="../../assets/img/student-m.png">
      <div class="sahelBold" id="user-full-name">
        صائب ملایی
      </div>
      <div class="sahelBold" id="userPhoneNumber">
        09133917225
      </div>
    </div>
    <mat-nav-list>
      <mat-list-item (click)="closeSideNav()">
        <mat-icon matListIcon>home</mat-icon>
        <a i18n routerLink="/">Home</a>
      </mat-list-item>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-icon matListIcon>toc</mat-icon>
          <a class="paddinLeft16px" i18n>Course Settings</a>
        </mat-expansion-panel-header>
        <mat-list-item (click)="closeSideNav()" routerLink="/class/class">
          <mat-icon matListIcon>schedule</mat-icon>
          <a i18n>Semester</a>
        </mat-list-item>
        <mat-list-item (click)="closeSideNav()" routerLink="/class/class">
          <mat-icon matListIcon>school</mat-icon>
          <a i18n>Course</a>
        </mat-list-item>
        <mat-list-item (click)="closeSideNav()" routerLink="/class/class">
          <mat-icon matListIcon>person</mat-icon>
          <a i18n>Teacher</a>
        </mat-list-item>
        <mat-list-item (click)="closeSideNav()" routerLink="/class/class">
          <mat-icon matListIcon>folder_shared</mat-icon>
          <a i18n>Student</a>
        </mat-list-item>
        <mat-list-item (click)="closeSideNav()" routerLink="/class/class">
          <mat-icon matListIcon>school</mat-icon>
          <a i18n>Class</a>
        </mat-list-item>
      </mat-expansion-panel>
      <mat-list-item (click)="closeSideNav()">
        <mat-icon matListIcon>how_to_reg</mat-icon>
        <a i18n matLine>Profile</a>
      </mat-list-item>
      <mat-list-item (click)="closeSideNav()">
        <mat-icon matListIcon>dashboard</mat-icon>
        <a i18n matLine>Setting</a>
      </mat-list-item>

    </mat-nav-list>
  </mat-sidenav>
  <router-outlet></router-outlet>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button (click)="drawer.toggle()" *ngIf="!drawer.opened" aria-label="Toggle sidenav" mat-icon-button
              type="button">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <div ngClass="loginImage">
        <a [matMenuTriggerFor]="menu" ngClass="loginImage">
          <img alt="login" ngClass="loginImage right" src="../../assets/img/student-m.png">
        </a>
        <mat-menu #menu="matMenu" xPosition="after">
          <button mat-menu-item routerLink="login" i18n>Login</button>
          <button mat-menu-item i18n routerLink="sign-up">Sign Up</button>
        </mat-menu>
        </div>
    </mat-toolbar>
    <div class="ylb-app-content">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>
